<script setup lang="ts">
import { showToast } from 'vant'
import { ref } from 'vue'
import Index from '@/pages/Index.vue'
import Team from '@/pages/Team.vue'

const onClickLeft = () => alert('返回')
const onClickRight = () => alert('搜索')

// 监听点击事件
const active = ref("index");//改为index，默认index页面高亮
const onChange = (index: number) => showToast(`标签 ${index}`);
</script>

<!--通用布局-->
<template>
  <van-nav-bar title="主题" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
    <!-- 插槽 -->
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>

  <div class="content">
    <template v-if = "active === 'index'">
      <Index/>
    </template>
    <template v-if = "active === 'team'">
      <Team/>
    </template>
  </div>
  <!--  底部导航 active是绑定的变量，onChange是点击事件 active是高亮的变量-->
  <van-tabbar v-model="active" @change="onChange">
    <van-tabbar-item icon="home-o" name="index">首页</van-tabbar-item>
    <van-tabbar-item icon="search" name="team">组队</van-tabbar-item>
    <van-tabbar-item icon="friends-o" name="user">用户</van-tabbar-item>
  </van-tabbar>

</template>

<style scoped>

</style>
